// 权限控制
import store from '@/store'
import router from '@/router'
// 引入protress进度条插件和样式
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 白名单
const WHITE_LIST = ['/login', '404']

router.beforeEach(async (to, from, next) => {
  // 开启进度条
  NProgress.start()
  // 是否有token
  if (store.state.user.token) {
    // 是否是登陆页
    if (to.path === '/login') {
      // 有token不需要登陆，直接跳转到主页
      next('/')
    } else {
      // 只有放行的时候才去获取用户资料
      // 是每次都获取吗？
      // 如果当前vuex中有用户的资料的 id 表示 已经有资料了 不需要获取了 如果没有id才需要获取
      if (!store.getters.userId) {
        // 调用action函数，这个位置
        // async 函数所return的内容，使用await就能接收到
        const { roles } = await store.dispatch('user/asyncGetUserInfo')
        // 1. 拿到俩份数据 一份menus标识数据 一份动态路由表数据
        // console.log('action内部传出的数据为', roles.menus)
        // routes 就是筛选得到的动态路由
        const routes = await store.dispatch('permission/filterRoutes', roles.menus)
        // 动态路由 添加到路由表中 默认的路由表只有静态路由，没有动态路由
        // 使用动态路由addRoutes 必须使用next(地址) 不能使用next() 负责刷新后权限消失 这个是vue-router的一个已知缺陷
        // 如果你配置了兜底路由 path * 必须把它放到整个路由表的末尾 [静态 + 动态 + *]
        // 有问题的是这样的 [静态的 + * + 动态]
        router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }]) // 把动态路由添加到路由表中
        next(to.path)
      } else {
        next()
      }
    }
  } else {
    // 是否在白名单中
    // includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
    // if (WHITE_LIST.includes(to.path)) {
    if (WHITE_LIST.indexOf(to.path) > -1) {
      next()
    } else {
      next('/login')
    }
  }
  // 结束进度条
  NProgress.done()
})

router.afterEach(() => {
  // 结束进度条
  NProgress.done()
})
